<!--  -->
<template>
	<div>
		<cu-custom :bgImage="bgImage" :needBack="true" bgColor="bgNormal" topTitle="申请列表" titleClass="commTitleWhite"
			backIconColor="#fff"></cu-custom>
		<view class="filtrate">
			<filtrate :options="options" :isShowTree="false"></filtrate>
		</view>
		<view class="top-data">
			<view class="num">组织数量：{{countUser}}</view>
			<view class="line"></view>
			<view class="num">已审核数量：{{countShenghe}}</view>
			<view class="line"></view>
			<view class="num">已填报数量：{{countTianbao}}</view>
		</view>
		<scroll-view class="scroll_content" scroll-y :style="{ height: getHeight() }" @scrolltolower="loadMore">
			
			<view class="meterials-list">
				<view class="meterials-1" v-for="item in dataList" :key="item.id"  @click="toDetail(item)">
					<view class="meterials-1-header">
						<view class="title">
							<view class="name">{{item.name || ''}}</view>
							<view class="time">{{item.createTime}}</view>
						</view>
						<view>
							<view class="status2" v-if="!item.score && item.recordCount == 0">未填报</view>
							<view class="status" v-if="!item.score && item.recordCount != 0">填报中</view>
							<view class="status1" v-if="item.score">已完成</view>
						</view>
					</view>
					<view class="meterials-slider">
						<view class="name">
							回复进度
						</view>
						<view class="sliderx">
							<u-slider :value="item.recordCount == 0 ? 0 : item.recordAnnotationCount/item.recordCount*100" min="0" max="100"
								block-color="#4674F6" active-color="#4674F6" inactive-color="#EFF0F"
								:disabled="true"></u-slider>
						</view>
					</view>
					<view class="meterials-slider">
						<view class="name">
							填报进度
						</view>
						<view class="sliderx">
							<u-slider :value="item.recordCount/item.managementCount*100" min="0" max="100"
								block-color="#FEA538" active-color="#FEA538" inactive-color="#EFF0F"
								:disabled="true"></u-slider>
						</view>
					</view>
					<view class="other-data">
						<view class="data-1" style="width: 100%;">
							<text class="p1">申请类别：</text>
							<text class="p2">{{item.socialOrganizationType}}</text>
						</view>
					</view>
					<view class="other-data">
						<view class="data-1">
							<text class="p1">填报进度：</text>
							<text class="p2">{{(item.recordCount/item.managementCount*100).toFixed(0)}}%</text>
						</view>
						<view class="data-1">
							<text class="p1">申请级别：</text>
							<text class="p2">{{item.declarationlevel}}</text>
						</view>
					</view>
					<view class="other-data">
						<view class="data-1">
							<text class="p1">自评得分：</text>
							<text class="p2">{{item.recordSelfScoreSum}}</text>
						</view>
						<view class="data-1">
							<text class="p1">专家打分：</text>
							<text class="p2">{{item.recordScoreSum || '暂无'}}</text>
						</view>
						<view v-if="isAdminRole" class="btn-box">
							<u-button @click="checkApply(item)" class="btn" type="primary" size="mini" plain>审核</u-button>
							<u-button @click="delApply(item)" class="btn" type="error" size="mini" plain>删除</u-button>
						</view>
					</view>
					
				</view>
			</view>
			<view style="width: 100%;height: 30rpx;"></view>
			<u-loadmore :status="status" :load-text="loadText"></u-loadmore>
		</scroll-view>
	</div>
</template>

<script>
	import filtrate from "components/filtrate";
	import {
		getPageList,
		nextData,
		checkUpOrgApply
	} from "@/api/expert.js";
	import {
		getCurrentDeclarationSystem3,
	} from "@/api/home";
	export default {
		data() {
			return {
				isAdminRole: uni.getStorageSync('isAdminRole') == '1' ? true : false,
				scorllContentHeight: "1000rpx",
				applicationList: [],
				form: {
					size: 10,
					current: 1,
					keyword: "",
					rate: "",
					declarationSystemId: ''
					// currentDeclarationSystem: 2
				},
				countShenghe: 0,
				countTianbao: 0,
				countUser: 0,
				total: 0,
				loadText: {
					loadmore: "加载更多",
					loading: "加载中",
					nomore: "没有更多了",
				},
				dataList: [],
				status: "loadmore",
				options: [{
					title: "填报状态",
					id: 1,
					children: [{
							name: "未填报",
							value: "0",
							id: 0
						},
						{
							name: "填报中",
							value: "1",
							id: 1
						},
					],
				}],
			};
		},
		mounted() {
			uni.$on("search", (data) => {
				console.log(data);
				this.dataList = []
				this.form.current = 1
				this.form.keyword = data.keyword;
				this.getList()
			});
			uni.$on("selectOptions", (data) => {
				console.log(data)
				this.dataList = []
				this.form.current = 1
				if (data) {
					this.form.rate = data[1]

				} else {
					this.form.rate = ''
				}
				this.getList()

			});
		},
		async onLoad() {
			await this.getCurrentTx()
			this.getList();
		},
		methods: {
			checkApply(item) {
				let unitName = encodeURIComponent(item.unitName)
				uni.navigateTo({
					url: `/packageB/applicationMaterials/checkApply?applyId=${item.id}&unitName=${unitName}`,
				})
			},
			delApply(item) {
				uni.showModal({
				  title: "提示",
				  content: "是否确认删除当前组织申请？删除后不可恢复!",
				  confirmText: "确定",
				  success: (res) => {
				    if (res.confirm) {
							let params = {
								...item,
								delFlag: 1
							}
							checkUpOrgApply(params).then(res => {
								if (res.code == 200) {
									uni.showToast({ title: "删除成功", on: "none" })
									setTimeout(() => {
										this.form.current = 1
										this.dataList = []
										this.getList()
									}, 1500)
								}
							})
				    } else if (res.cancel) {
				      console.log("用户点击取消");
				    }
				  },
				});
			},
			getHeight() {
				return `calc(100vh - ${this.CustomBar}px - 224rpx)`;
			},
			async getCurrentTx() {
				let res = await getCurrentDeclarationSystem3()
				this.form.declarationSystemId = res.data.id
			},
			getList() {
				getPageList(this.form).then((res) => {
					if (res.code == 200) {
						this.total = res.data.resultPage.total;
						this.countUser = res.data.countUser
						this.countTianbao = res.data.countTianbao
						this.countShenghe = res.data.countShenghe
						// console.log("res===", res);
						if (res.data.resultPage.total > 10) {
							this.dataList = this.dataList.concat(res.data.resultPage.records); //合并数组
						} else {
							this.dataList = res.data.resultPage.records;
							this.status = 'nomore';
						}
					}
				});
			},
			// 加载更多
			loadMore() {
				console.log("到底了");
				if (this.total > this.form.current * this.form.size) {
					this.status = "loading";
					this.form.current++;
					this.getList();
				} else {
					this.status = "nomore";
				}
			},
			// 详情
			toDetail(data) {
				//整个申报记录id
				uni.setStorageSync("currentReportId",data.id)
				uni.setStorageSync("currentDeclarationSystemId",data.declarationSystemId)
				//当前申报记录的组织类型id
				uni.setStorageSync("currentSocialOrganizationTypeId",data.socialOrganizationTypeId)
				console.log(data)
				uni.navigateTo({
					url: `/packageB/applicationMaterials/detail?id=${data.id}`,
				});
			},
		},
		components: {
			filtrate
		},
	};
</script>
<style lang='scss' scoped>
	.top-data {
		background: #ffffff;
		height: 97rpx;
		line-height: 97rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 30rpx;
		margin-top: 20rpx;
		.num {
			font-size: 24rpx;
			color: #333333;
		}
		.line {
			width: 2rpx;
			height: 39rpx;
			background: #F5F5F5;
		}
	}
	.scroll_content {
		.meterials-list {
			padding: 20rpx 20rpx 0;
			.meterials-1 {
				background: #ffffff;
				border-radius: 8rpx;
				padding: 10rpx 30rpx;
				margin-bottom: 20rpx;
				position: relative;
				.meterials-1-header {
					display: flex;
					justify-content: space-between;
					padding: 16rpx 0;

					.title {
						flex: 1;
						overflow: hidden;
						padding-right: 10rpx;
						.name {
							display: block;
							font-size: 28rpx;
							color: #333333;
							height: 38rpx;
							line-height: 38rpx;
							white-space: nowrap;
							overflow: hidden;
							text-overflow: ellipsis;
							margin-bottom: 5rpx;
						}

						.time {
							font-size: 24rpx;
							color: #999999;
						}
					}

					.status {
						width: 117rpx;
						height: 42rpx;
						background: #FFF7ED;
						border: 1px solid #FFE7CA;
						border-radius: 8rpx;
						color: #FEA538;
						text-align: center;
					}
					.status1 {
						width: 117rpx;
						height: 42rpx;
						background: #ebfaf5;
						border: 1px solid #BEE0D6;
						border-radius: 8rpx;
						color: #5ACDAA;
						text-align: center;
					}
					.status2 {
						width: 117rpx;
						height: 42rpx;
						background: #faebeb;
						border: 1px solid #F5C0C0;
						border-radius: 8rpx;
						color: #fb5151;
						text-align: center;
					}
				}

				.meterials-slider {
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding: 16rpx 0;

					.name {
						font-size: 26rpx;
						color: #999999;
					}

					.sliderx {
						width: 480rpx;
					}
				}

				.other-data {
					display: flex;
					padding: 16rpx 0;

					.data-1 {
						width: 40%;

						.p1 {
							font-size: 26rpx;
							color: #999999;
						}

						.p2 {
							font-size: 26rpx;
							color: #333333;
						}
					}
					.btn-box {
						position: absolute;
						bottom: 20rpx;
						right: 20rpx;
						display: flex;
						.btn:first-child {
							margin-right: 10rpx;
						}
					}
				}
			}
		}
	}

	::v-deep .u-slider--disabled {
		opacity: 1 !important;
	}

	::v-deep .u-slider__button {
		border: 4rpx solid #ffffff;
	}
</style>